<template>
  <div></div>
</template>

<script>
import { ref, computed } from "vue";
export default {
  name: "computed",
  setup() {
    // 加入了getter函数 从getter函数中返回了可变的reactive ref对象
    const sentence = ref(",来吧,展示！");

    const superSentence = computed(() => {
      return "兄弟们" + sentence.value;
    });
    console.log("🍊computed🍊" + superSentence.value);

    // 可以在computed中添加 get 和 set 函数来重写ref对象
    const superSentence1 = computed({
      get() {
        return "GLZ" + sentence.value;
      },
      set(newValue) {
        // 拦截修改值
				console.log("拦截到的值:" + newValue);
        console.log("修改了sentence的值");
      },
    });
    console.log("🍊computed🍊" + superSentence1.value);

    superSentence1.value = "cao,被改掉了呢！";

    console.log("🍊computed🍊" + superSentence1.value);
  },
};
</script>

<style></style>
